
<template>
  <div class="system-customer">

    <xr-header/>
    <div
      class="customer-content">
      <div class="system-view-nav">
        <Tree :data="categoryData" expand="true" default-expand-all="true" @on-select-change="refreshTask"></Tree>
      </div>
      <div class="system-view-content">
        <div class="option-bar">
          <el-row type="flex" justify="start" style="margin-left: -28px;margin-top: 15px">
            <el-form :inline="true" :model="queryForm" class="demo-form-inline" size='mini'>

              <el-form-item label="时间区间">
                <el-date-picker
                  v-model="queryForm.times"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  unlink-panels
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item style="margin-left: 28px">
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="default" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </el-row>

        </div>



        <el-row class="margin:30px;">
          <el-col>
            <el-table
              :data="tableData"
              size="mini"
              style="width: 100%"
              :height="tableHeight"
            >
              <el-table-column
                label="序号"
                fixed
                type="index"
                width="50"
                fixed
                align="center">
                <template slot-scope="scope">
                  <span>{{(queryForm.page-1 ) * queryForm.pageSize + scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="taskName"
                label="任务名称"
                show-overflow-tooltip
                width="200">
              </el-table-column>

              <el-table-column
                prop="priority"
                label="类型"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <Tag v-if="scope.row.priority==50" color="primary">普通</Tag>
                  <Tag v-else-if="scope.row.priority>50 && scope.row.priority<=100" color="warning">加急</Tag>
                  <Tag v-else color="error">紧急</Tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="startTime"
                label="开始时间"  show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="endTime"
                label="结束时间"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                  <el-button @click="details(scope.row.processInstanceId,scope.row.taskId)" type="text" size="small">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <div class="p-contianer">
          <el-pagination
            background
            class="p-bar"
            @current-change="handleCurrentChange"
            :current-page="queryForm.page"
            :page-size="queryForm.pageSize"
            layout="prev, pager, next, sizes, total, jumper"
            :total="total">
          </el-pagination>
        </div>


      </div>
    </div>



    <el-dialog fullscreen :visible.sync="rundialogGoingVisibleExternalUrl" >
      <div>
        <his-details-external-url :pid="hisProcessInstanceId"></his-details-external-url>
      </div>
    </el-dialog>
  </div>


</template>
<style rel="stylesheet/scss" lang="scss" scoped>
  .p-contianer {
    position: relative;
    background-color: white;
    height: 44px;
    .p-bar {
      float: right;
      margin: 5px 100px 0 0;
      font-size: 14px !important;
    }
  }
  .option-bar {
    padding: 15px 20px;
  }
  .system-customer {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0 15px;
  }
  .customer-content {
    flex: 1;
    position: relative;
    display: flex;
    overflow: hidden;
  }
  .system-view-nav {
    min-width: 200px;
    background: #fff;
    margin-right: 10px;
    padding-top: 20px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;

  }
  .system-view-content {
    flex: 1;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
  }

  // 菜单
  .menu-item {
    color: #333;
    font-size: 13px;
    padding: 0 15px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    position: relative;
    .icon-close {
      position: absolute;
      top: 0;
      right: 8px;
      z-index: 1;
      display: none;
    }
  }

  .menu-item:hover,
  .menu-item.is-select {
    background-color:  #F6F8FA;
  }

  .menu-item:hover::before,
  .menu-item.is-select::before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2px;
    background-color: #5383ed;
  }
</style>

<script>
  import {getBpmnModelCategory,listAgentTaskMeToLog} from "@/api/analy"
  import {getFormInfoByProcId} from "@/api/index"
  import hisDetailsExternalUrl from '@/views/bpm/startup/hisDetailsExternalUrl'
  import XrHeader from '@/components/XrHeader'

  export default {
    name: 'Task',
    components:{
      hisDetailsExternalUrl,
      XrHeader
    },

    data() {
      return {
        rundialogGoingVisibleExternalUrl:false,
        hisProcessInstanceId:'',
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        tableData: [],
        tableHeight: 450,
        total: 0,
        chartVisible: false,
        chartData: {},
        sellerId: 0,
        queryDate:[],
        shopName: [],
        queryForm: {
          name: "",
          start: "",
          startUserNo: "",
          keyWord: "",
          end: "",
          page: 1,
          limit: 10,
          pageSize: 10,

          whereSql: "",
          typeKey: "",
          times: []
        },
        categoryData: [
        ]
      }
    },
    mount() {
      this.getData()
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },
    created() {
      this.getData()
    },
    methods: {
      details:function(processInstanceId,taskId){
        this.hisProcessInstanceId=processInstanceId;
        getFormInfoByProcId(processInstanceId).then((response) => {
          if (response.code == 0) {
            if (response.external){
              this.rundialogGoingVisibleExternalUrl=true;
            }else{
              this.$router.push({ name:'handleHisTaskDetails', query: { t: new Date().getTime()
                  ,"processInstanceId":processInstanceId
                  ,"taskId":taskId
              }})

            }
          } else {

          }

        })
      },
      refreshTask:function(data){
        if (data[0].parentId=='-1'){
          this.queryForm.typeKey=""
        } else{
          this.queryForm.typeKey=data[0].typeKey;

        }
        this.queryForm.start = "";
        this.queryForm.end = "";
        this.queryForm.times=[]
        this.queryForm.page=1
        this.getData()

      },
      queryMethod:function(){
       var name=  this.queryForm.name;
       var whereSql='';
       var createTime=  this.queryForm.createTime;
       if (createTime ){
         if (createTime[0]){
           whereSql="  and  startTime   between '"+createTime[0]+"' and "+"'"+createTime[1]+"'";
         }

       }
       this.queryForm.whereSql=whereSql;
        listAgentTaskMeToLog(this.queryForm).then((response) => {
          this.tableData = response.data
          this.total = response.count;


        })

      },

      getData: function () {
        getBpmnModelCategory().then((response) => {
          this.categoryData = response.data

        })
        listAgentTaskMeToLog(this.queryForm).then((response) => {
          this.tableData = response.data
          this.total = response.count;


        })
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getData()
      },

      search() {
        this.queryForm.page = 1
        if (this.queryForm.times){

          this.queryForm.start=this.queryForm.times[0]
          this.queryForm.end=this.queryForm.times[1]
        }

        this.queryMethod()
      },
      reset() {
        this.queryForm.name = "";
        this.queryForm.startUserNo = "";
        this.queryForm.keyWord = "";
        this.queryForm.createTime = "";
        this.queryDate = [];
        this.queryForm.whereSql = "";
        this.queryForm.start = "";
        this.queryForm.end = "";
        this.queryForm.times=[]
        this.getData()
      }

    }

  }

</script>
<style lang="scss" scoped>
.task-card{
  margin-top: 10px;
}

</style>
<style lang="scss" scoped>
  .message-header {
    margin-left: 28px;
    height: 60px;
    .title-icon {
      width: 30px;
      height: 30px;
      margin-right: 10px;
    }

    .title {
      font-size: 16px;
      font-weight: 600;
    }
  }
  .message-body {
    position: relative;
    height: calc(100% - 75px);
    padding-left: 15px;
  }
  .message-content {
    position: relative;
    height: 100%;
  }

  .message-body-side {
    padding: 20px 0;
    width: 200px;
    font-size: 14px;
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    overflow-y: auto;
    .side-item {
      position: relative;
      height: 50px;
      line-height: 50px;
      padding: 0 20px;
      font-size: 13px;
      cursor: pointer;
      i {
        color: #999;
      }
    }
  }
  .message-body-content {
    margin-left: 210px;
    height: 100%;
    overflow: hidden;
    background-color: white;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
  }

</style>
